<template>
	<view>
		<view class="page-head">
			<ltSearch v-model="searchValue" @search="getQuery" @plus="routerTo" placeholder="搜索:车牌号,VIN,车主姓名,车主电话"/>
		</view>
		<view class="page-list">
			<mescroll-uni ref="mescrollRef"  @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :top="110">
				<view class="user-list">
					<view v-for="(item,index) in carList" :key="index" style="margin-top: 32upx;" v-if="carList.length !== 0">
						<cusItme :item="item" />
					</view>					
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import ltSearch from '../../../components/lt-search/index.vue';
	import cusItme from './components/cusItem/cusItem.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { findCustomerVehicle } from '../../../api/cusList.js'
	export default{
		components:{
			ltSearch,
			cusItme
		},
		mixins: [MescrollMixin],
		data(){
			return{
				downOption:{
				},
				searchValue:'',
				carList:[]
			}
		},		
		methods:{
			getQuery(v){
				this.downCallback()
			},
			downCallback(){
				this.carList = []
				this.mescroll.resetUpScroll( true )	
			},
			async upCallback(page){
				let pageObj = {
					pageIndex:page.num,
					pageSize:page.size,
					searchKey:this.searchValue
				}				
				let res = await findCustomerVehicle(pageObj)
				if(res.result === '1'){
					this.mescroll.endSuccess(res.rows.length)
					this.carList = [...this.carList,...res.rows]
				} else {
					this.mescroll.endErr()
				}
			},
			routerTo(){
				uni.navigateTo({
					url: '/pages/views/cusList/otherCar'
				});				
			},
			toDetails(){
				console.log('-----details-----')
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.page-head{
		width: 100%;
		height: 8vh;
		// background-color: #000;
	}
	.page-list{
		width:100%;
		height: 90vh;
		// background-color: #f0f;
		overflow: hidden;
		overflow-y: scroll;
		.user-list{
			width: 100%;
			height: 100%;
			padding: 0 24upx 0 24upx;
			// background-color: #f0f ;
			background-color: rgb(249,250,254) ;
		}
	}
</style>
